<template>
  <el-menu
    :default-active="defaultActive"
    class="z-home-menu"
    @select="handleSelect"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#409eff"
  >
    <template v-for="item in navList">
      <!-- // 无子菜单 -->
      <el-menu-item :index="item.id" v-if="!item.children" :key="item.id">
        <template #title>{{ item.name }}</template>
      </el-menu-item>
      <!-- 有子菜单 -->
      <el-submenu v-else :index="item.id" :key="item.id">
        <template #title>
          <!-- <i class="el-icon-location"></i> -->
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="$item in item.children"
          :index="$item.id"
          :key="$item.id"
          >{{ $item.name }}</el-menu-item
        >
      </el-submenu>
    </template>
  </el-menu>
</template>
<script setup>
// 接收到的参数
let props = defineProps(["defaultActive", "navList", "navAllList"]);
let emit = defineEmits(["on-menu"]);
function handleSelect(id) {
  let item = props.navAllList.find((item) => {
    return id == item.id;
  });
  emit("on-menu", item);
}
</script>